<template>
  <div ref="searchRef" class="admin-global-search" :class="{ 'is-visible': state.visible }">
    <div class="admin-global-search-wrapper">
      <!-- 搜索框 -->
      <Input v-model:value="state.keyword" placeholder="搜索" @before-reset="onBeforeReset">
        <template #prefix> <i class="search-icon fal fa-search" /> </template>
      </Input>
      <!-- 结果集 -->
      <div v-show="state.keyword" class="result">
        <div v-show="!state.searchMenus.length" class="result-empty">{{ state.loadingText }}</div>
        <div v-show="state.searchMenus.length" class="result-content">
          <div
            v-for="(menu, index) in state.searchMenus"
            :id="menu.id"
            :key="index"
            class="result-content-item"
            @click="onMenuClick(menu)"
          >
            <div :class="menu.icon"></div>
            <HighlightText :text="menu.text" :highlight-text="state.keyword" />
          </div>
        </div>
      </div>
      <!-- 历史数据 -->
      <div v-show="!state.keyword" class="history">
        <div class="history-title">历史使用</div>
        <div class="history-content">
          <div
            v-for="(menu, index) in state.historyMenus"
            :key="index"
            class="history-content-item"
            @click="onMenuClick(menu)"
          >
            <i :class="menu.icon"></i><span>{{ menu.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Input, HighlightText } from '@jecloud/ui';
  import { useGlobalSearch } from './hooks/use-global-search';
  export default defineComponent({
    name: 'GlobalSearch',
    components: { Input, HighlightText },
    setup(props, context) {
      return useGlobalSearch({ props, context });
    },
  });
</script>
<style lang="less">
  .admin-global-search {
    position: absolute;
    top: 0;
    z-index: 100;
    visibility: hidden;
    &.is-visible {
      visibility: visible;
      .admin-global-search-wrapper {
        width: 450px;
      }
    }
    &-wrapper {
      transition: width 0.3s ease;
      overflow: hidden;
      white-space: nowrap;
      color: @text-color;
      min-height: 60px;
      width: 0;
      background-color: #ffffff;
      box-shadow: 1px 1px 8px -2px #8d8d8d;
      padding: 10px 20px;
      .search-icon {
        color: @primary-color;
        margin-right: 5px;
      }
      .je-input {
        height: 48px;
        border: 0;
        border-bottom: 1px solid @primary-color;
        border-radius: 0;
        padding-left: 0;
        box-shadow: none !important;
        &,
        & * {
          transition: none;
        }
      }
      .history {
        padding: 20px 0 10px 0;
        &-title {
          color: #8d98ab;
        }
        &-content {
          display: flex;
          flex-wrap: wrap;
          position: relative;
          &-item {
            cursor: pointer;
            display: block;
            flex: 0 0 33.33333333%;
            max-width: 33.33333333%;
            padding: 5px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            i {
              margin-right: 4px;
            }
            &:hover {
              color: @primary-color;
            }
          }
        }
      }

      .result {
        &-empty {
          color: #8d98ab;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 50px;
        }

        &-content {
          margin-top: 5px;
          overflow-y: auto;
          max-height: 320px;
          &-item {
            line-height: 32px;
            cursor: pointer;
            &:hover,
            &.is-selected {
              background-color: @je-menu-item-active-bg;
            }
            div {
              display: inline-block;
              width: 20px;
              text-align: center;
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
</style>
